<!--
 * @Description:
 * @Author bianpengfei
 * @create 2021/5/14 17:44
 -->
<template>
  <div class="page bg-[#fff] p-[12px]">
    <div ref="editor" style="height: 500px"></div>

    <g-title>tinymce编辑器</g-title>
    <div class="flex justify-center mb-12">
      <el-button type="primary" @click="onSetValue">设置值</el-button>
      <el-button type="danger" @click="onClear">清楚内容</el-button>
    </div>

    <el-input v-model="textarea" type="textarea" :rows="10" placeholder="请输入内容"> </el-input>

    <el-row>
      <el-col :span="24" class="my-12px">
        <g-tinymce ref="tinymceRef" v-model="value" :height="500"></g-tinymce>
      </el-col>
      <el-col :span="24">
        <div class="border-1px h-[200px] p-12 rounded-sm w-full overflow-y-auto">{{ value }}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      textarea: ''
    }
  },

  mounted() {
    // window.BSE_BASE_URL = '/HIS/dist-lib/'
    let instance = new window.BSE.Editor({ el: this.$refs.editor })
    console.log(window.BSE)
    instance.on('loaded', () => {
      instance.setContent('h1sdsf2324')
      console.log('instance', instance)
    })
  },

  methods: {
    onSetValue() {
      // this.value = `我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。`
      this.value = this.textarea
    },

    onClear() {
      this.value = ''
    }
  }
}
</script>

<style scoped lang="scss"></style>
